<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
    <title>商品列表展示</title>
    <meta name="viewport" id="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" th:href="@{/list.css}">
    <script th:src="@{/public/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/list.js}"></script>
    <!--  获取请求域中的值，转换为js变量  -->
    <script th:inline="javascript">
        const site = /*[[${site}]]*/"";
    </script>
</head>
<body>
    <!--  上  -->
    <div class="search">
        <div class="empty"></div>
        <div class="to">
            <span>派送至：</span>
            <span>潍坊寿光圣城街道</span>
            <span class="arrow"></span>
        </div>
        <div class="search-logo"></div>
    </div>
    <!--  商品列表  -->
    <div class="list">
        <div class="category-list">
            <ul>
                <li th:each="c : ${categories}" th:text="${c.name}" th:id="${c.id}"></li>
            </ul>
        </div>
        <div class="product">
        <!--      商品列表      -->
            <!-- 商品头部  -->
            <div class="header">
                <div>综合排序</div>
                <div>
                    <div>按价格</div>
                    <div class="sort">
                        <i></i>
                        <i></i>
                    </div>
                </div>
                <div>分类</div>
            </div>
            <!-- 商品列表-->
            <div class="good-list">
                <ul>
                    <li th:each="c:${categories}" th:text="${c.name}" th:id="${c.id}"></li>
                </ul>
            </div>

        </div>
    </div>
    <!--  导航栏  -->
    <div class="nav">
        <div class="index">
            <div class="ico"></div>
            <div class="text">首页</div>
        </div>
        <div class="category">
            <div class="ico"></div>
            <div class="text">分类</div>
        </div>
        <div class="cart">
            <div class="ico"></div>
            <div class="text">购物车</div>
        </div>
        <div class="my">
            <div class="ico"></div>
            <div class="text">我的</div>
        </div>
    </div>
    <div id="good-template" style="display: none">
        <div class="pic"></div>
        <div class="desc">
            <div class="title">新鲜青柠500/g盒新鲜特价</div>
            <div class="pac">
                <div class="price">10.8</div>
                <div class="count">
                    <i></i>
                    <i>0</i>
                    <i></i>
                </div>
            </div>
        </div>
    </div>
</body>
</html>